import React, { useState } from 'react'
import Header from '../layout/Header'
import Search from '../layout/Search'
import Main from '../layout/Main'
import { Button } from 'antd'
export default function PurchaseReturnsAndShipments() {
  const [status, SetStatus] = useState(4)
  const [searchHeight, SetsearchHeight] = useState('100px')
  const [columns, SetColumns] = useState([
    {
      title: '供应商编码',
      dataIndex: 'documentnumber',
      key: 'documentnumber',
    },
    {
      title: '供应商名称',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '订货量',
      dataIndex: 'orderquantity',
      key: 'orderquantity',
    },
    {
      title: '订货金额',
      dataIndex: 'orderamount',
      key: 'orderamount',
    },
    {
      title: '到货量',
      dataIndex: 'arrivalquantity',
      key: 'arrivalquantity',
    },
    {
      title: '到货金额',
      dataIndex: 'arrivalamount',
      key: 'arrivalamount',
    },
    {
      title: '采购运费',
      dataIndex: 'purchasingfreight',
      key: 'purchasingfreight',
    },
    {
      title: '在途数量',
      dataIndex: 'quantityintransit',
      key: 'quantityintransit',
    },
    {
      title: '在途金额',
      dataIndex: 'intransitamount',
      key: 'intransitamount',
    },
    {
      title: '取消数量',
      dataIndex: 'cancelquantity',
      key: 'cancelquantity',
    },
    {
      title: '取消金额',
      dataIndex: 'cancelamount',
      key: 'cancelamount',
    },
    {
      title: '退货数量',
      dataIndex: 'returnquantity',
      key: 'returnquantity',
    },
    {
      title: '退货金额',
      dataIndex: 'returnamount',
      key: 'returnamount',
    },
    {
      title: '退货运费',
      dataIndex: 'backfreight',
      key: 'backfreight',
    },
    {
      title: '操作',
      dataIndex: 'operate',
      key: 'operate',
      render: (text: any, record: any) => {
        return <div>
          <Button>采购入库流水</Button>
        </div>
      }
    },
  ])
  const [list, SetList] = useState([
    {
      id: 1,
      documentnumber: "GYS001",
      name: "聚沙商贸",
      orderquantity: 2000,
      orderamount: 360000.00,
      arrivalquantity: 1000,
      arrivalamount: 180000.00,
      purchasingfreight: 2000,
      quantityintransit: 1000,
      intransitamount:180000.00,
      cancelquantity: 0,
      cancelamount:0,
      returnquantity:100,
      returnamount:18000.00,
      backfreight: 200,
    },
    {
      id: 2,
      documentnumber: "GYS001",
      name: "聚沙商贸",
      orderquantity: 2000,
      orderamount: 360000.00,
      arrivalquantity: 1000,
      arrivalamount: 180000.00,
      purchasingfreight: 2000,
      quantityintransit: 1000,
      intransitamount:180000.00,
      cancelquantity: 0,
      cancelamount:0,
      returnquantity:100,
      returnamount:18000.00,
      backfreight: 200,
    },
    {
      id: 3,
      documentnumber: "GYS001",
      name: "聚沙商贸",
      orderquantity: 2000,
      orderamount: 360000.00,
      arrivalquantity: 1000,
      arrivalamount: 180000.00,
      purchasingfreight: 2000,
      quantityintransit: 1000,
      intransitamount:180000.00,
      cancelquantity: 0,
      cancelamount:0,
      returnquantity:100,
      returnamount:18000.00,
      backfreight: 200,
    },
    {
      id: 4,
      documentnumber: "GYS001",
      name: "聚沙商贸",
      orderquantity: 2000,
      orderamount: 360000.00,
      arrivalquantity: 1000,
      arrivalamount: 180000.00,
      purchasingfreight: 2000,
      quantityintransit: 1000,
      intransitamount:180000.00,
      cancelquantity: 0,
      cancelamount:0,
      returnquantity:100,
      returnamount:18000.00,
      backfreight: 200,
    },
    {
      id: 5,
      documentnumber: "GYS001",
      name: "聚沙商贸",
      orderquantity: 2000,
      orderamount: 360000.00,
      arrivalquantity: 1000,
      arrivalamount: 180000.00,
      purchasingfreight: 2000,
      quantityintransit: 1000,
      intransitamount:180000.00,
      cancelquantity: 0,
      cancelamount:0,
      returnquantity:100,
      returnamount:18000.00,
      backfreight: 200,
    },
    {
      id: 6,
      documentnumber: "GYS001",
      name: "聚沙商贸",
      orderquantity: 2000,
      orderamount: 360000.00,
      arrivalquantity: 1000,
      arrivalamount: 180000.00,
      purchasingfreight: 2000,
      quantityintransit: 1000,
      intransitamount:180000.00,
      cancelquantity: 0,
      cancelamount:0,
      returnquantity:100,
      returnamount:18000.00,
      backfreight: 200,
    },
    {
      id: 7,
      documentnumber: "GYS001",
      name: "聚沙商贸",
      orderquantity: 2000,
      orderamount: 360000.00,
      arrivalquantity: 1000,
      arrivalamount: 180000.00,
      purchasingfreight: 2000,
      quantityintransit: 1000,
      intransitamount:180000.00,
      cancelquantity: 0,
      cancelamount:0,
      returnquantity:100,
      returnamount:18000.00,
      backfreight: 200,
    },
    {
      id: 8,
      documentnumber: "GYS001",
      name: "聚沙商贸",
      orderquantity: 2000,
      orderamount: 360000.00,
      arrivalquantity: 1000,
      arrivalamount: 180000.00,
      purchasingfreight: 2000,
      quantityintransit: 1000,
      intransitamount:180000.00,
      cancelquantity: 0,
      cancelamount:0,
      returnquantity:100,
      returnamount:18000.00,
      backfreight: 200,
    },
    {
      id: 9,
      documentnumber: "GYS001",
      name: "聚沙商贸",
      orderquantity: 2000,
      orderamount: 360000.00,
      arrivalquantity: 1000,
      arrivalamount: 180000.00,
      purchasingfreight: 2000,
      quantityintransit: 1000,
      intransitamount:180000.00,
      cancelquantity: 0,
      cancelamount:0,
      returnquantity:100,
      returnamount:18000.00,
      backfreight: 200,
    },
  ])
  const [pageSize, SetPageSize] = useState(5)
  const [page, SetPage] = useState(1)
  const paginationConfing = {
    page: page,
    total: list.length,
    pageSize: pageSize,
    showSizeChanger: true,
    pageSizeOptions: ['2', '3', '4', '5'],
    onchange: (page: number) => {
      SetPage(page)
    },
    onShowSizeChange: (current: number, size: number) => {
      SetPageSize(size)
      SetPage(current)
    }
  }
  return (
    <div>
      <Header status={status} />
      <Search status={status} searchHeight={searchHeight} />
      <Main status={status} columns={columns} list={list} paginationConfing={paginationConfing} />
    </div>
  )
}
